<style lang="less">
    @import './result.less';
</style>
<template>
  <div class="" id="result-inquiry">
    <Row style="margin: 10px 0px;">
      <label>姓名</label>
      <Input v-model="condition.username" placeholder="请输入姓名" clearable style="width: 100px"></Input>
      <label style="margin-left: 10px;">考号</label>
      <Input v-model="condition.examnum" placeholder="请输入考号" clearable style="width: 150px"></Input>
      <label style="margin-left: 10px;">试卷名称</label>
      <Input v-model="condition.testtitle" placeholder="请输入试卷名称" clearable style="width: 150px"></Input>
      <span style="margin: 0px 10px;">
        <button type="button" class="ivu-btn ivu-btn-primary" @click="searchResult()">
          <i class="ivu-icon ivu-icon-search"></i>
          <span>查询</span>
        </button>
      </span>
    </Row>
    <Table :columns="columns" :data="model.rows" border @on-sort-change="sortChange"></Table>
    <Row style="margin: 10px 0px;">
        <Page :total="model.count" :page-size="model.pageSize" show-elevator style="text-align: center;" @on-change="loadPage"></Page>
    </Row>

    <Modal :width="1366" v-model="show" title="试卷详情" id="caonima">
      <paper-preview :data="paperData"></paper-preview>
      <div slot="footer">
      </div>
    </Modal>
    <Spin size="large" fix v-if="model.state === '查询'"></Spin>
  </div>

</template>
<script>
import paperPreview from '../../preview/paper-preview.vue'
import PagedList from '@/plugins/PagedList.js'
import axios from 'axios'
    export default {
        data () {
            return {
              model: new PagedList('rs/sql/singleTable_OrderBy', 20,
              {items: "'*'", tablename: "'usertest'", orderitem: "'teststartdate desc'"}),
              show: false,
              paperData: {},
              condition: {

                username: '',
                examnum: '',
                testtitle: '',
              },
                columns: [
                  {
                      title: '序号',
                      type: 'index',
                      align: 'center',
                      width: 80
                  },
                    {
                        title: '姓名',
                        key: 'username',
                        width: 100
                    },
                    {
                        title: '考号',
                        key: 'examnum',
                        align: 'center',
                        width: 180
                    },
                    {
                        title: '试卷id',
                        key: 'testid',
                        width: 160
                    },
                    {
                        title: '试卷标题',
                        key: 'testtitle',
                        align: 'center',
                    },
                    {
                        title: '得分',
                        key: 'examusernum',
                        align: 'center',
                        width: 80,
                        sortable: true
                    },
                    {
                        title: '考试时间',
                        key: 'teststartdate',
                        align: 'center',
                        width: 200
                    },
                    {
                        title: '考试时长',
                        key: 'testtimelong',
                        align: 'center',
                        width: 100
                    },
                    {
                        title: '操作',
                        width: 80,
                        align: 'center',
                        render: (h, params) => {
                            return h('Button', {
                              props: {
                                  type: 'primary'
                              },
                              style: {
                                padding: '0'
                              },
                              on: {
                                  click: () => {
                                      this.checkPaper(params.row)
                                  }
                              }
                            }, '查看试卷');
                        }
                    }
                ]
            };
        },
        mounted () {
          this.search('1=1')
        },
        methods: {
          search (condition) {
            condition += ' and submitdate is not null'
            this.model.search(condition)
          },
          searchResult () {
            this.search(this.$getCondition(this.condition))
          },
          loadPage (index) {
              this.model.loadPage(index)
          },
          checkPaper (row) {
            this.show = true
            // 获取试卷
            axios.post('rs/logic/getusertestquinfo', {data: {testid: row.testid, userid: row.userid}}).then(res => {
              this.paperData = {
                testinfo: res.data.testinfo,
                tests: [res.data.oneques, res.data.douques, res.data.judques],
                userinfo: row
              }
              // this.show = false
            }).catch(error => {
              this.$Message.warning({
                content: '获取试卷失败'
              })
            }).finally(() => {

            })
          },
          sortChange (column, key, order) {
            // console.log('1111111111111', column, key, order);
            this.model.paramSource.orderitem = `'${key} ${order}'`
            this.model.search(condition)
          }
      },
      components: {
          paperPreview
      },
    };
</script>
